<template>
    <div class="Message">
        <TopBar :title="'消息提醒'"  :url="'/index/my/setting/setting'" :action="'保存'"></TopBar>
        <div>
            <div class="content">
                <div>
                        <h4>系统内音效</h4>
                        <p>如系统内刷新、新消息、点赞等音效</p>
                </div>
                <div @click="clickHandler($event)" class="slide-button">
                    <div></div>
                </div>
            </div>
            <div class="content">
                <div>
                    <h4>新消息提醒</h4>
                    <p>关闭后,此程序不运行时将无法收到提醒</p>
                </div>
                <div @click="clickHandler($event)" class="slide-button">
                    <div></div>
                </div>
            </div>
            <div class="content">
                <div>
                    <h4>应用内横幅提醒</h4>
                    <p>提醒已横幅形式展现</p>
                </div>
                <div  @click="clickHandler($event)" class="slide-button">
                    <div></div>
                </div>
            </div>
            <div class="content">
                <div >
                    <h4>声音提醒</h4>
                    <p style="opacity: 0">1</p>
                </div>
                <div @click="clickHandler($event)" class="slide-button">
                    <div></div>
                </div>
            </div>
            <div class="content">
                <div>
                    <h4>震动提醒</h4>
                    <p style="opacity: 0">1</p>
                </div>
                <div @click="clickHandler($event)" class="slide-button">
                    <div></div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
   import TopBar from "../../../component/TopBar";
    export default {
        name: "Message",
        components:{
            TopBar
        },
        data(){
            return{

            }
        },
        methods:{
            clickHandler(e){
                let item=  e.currentTarget.firstElementChild
                item.style.transition='left .3s'
                if (item.style.left==='0.01rem'||!item.style.left){
                    item.style.left='.2rem'
                    e.currentTarget.style.backgroundColor='#6B5CEB'
                }else{
                    item.style.left='0.01rem'
                    e.currentTarget.style.backgroundColor='#F5F6FA'
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .Message
      padding 0.12rem
      div
        margin-bottom 0.13rem

        .content
          display flex
          justify-content space-between

        div
          h4
            font-size 0.13rem

          p
            color #cccccc
            font-size 0.12rem

          .slide-button
            width 0.42rem
            height 0.22rem
            background-color #F5F6FA
            border-radius 0.2rem
            position relative
            border 1px solid #cccccc

            div
              height 0.18rem
              width 0.18rem
              position absolute
              top 0.01rem
              left 0.01rem
              background-color #ffffff
              border-radius 50%

</style>